<template>
     <li 
        v-on:mouseover="handleShowBtnDelete(true)"
        v-on:mouseout="handleShowBtnDelete(false)">      
        <label>
              <input 
                    type="checkbox" 
                    v-bind:checked="item.isFinished"
                    v-on:change="changeTodoFinished(item.id,!item.isFinished)" />
            <span>{{item.title}}</span>
        </label>              
        <button
            class="btn btn-warning"
            v-show="isShowBtnDelete"
            v-on:click="handleDeleteTodo(item.id)">
            删除
        </button>
    </li>
</template>

<script lang="ts">
    import { defineComponent } from 'vue';
    import TodosService from "./../../services/todos";
    import { mapActions } from "vuex";

    export default defineComponent({
        setup() {},
        props:['item'],
        data(){
            return {
                isShowBtnDelete:false
            }
        },
        methods:{
            ...mapActions({
                getAllTodos:"todos/getAllTodos"
            }),
            async handleShowBtnDelete(flag:boolean){
                this.isShowBtnDelete=flag;
            },
            async handleDeleteTodo(id:number){               
                await TodosService.del(id);
                let response=await TodosService.getAllTodos();
                this.getAllTodos(response.data.data);
            },            
            async changeTodoFinished(id:number,flag:boolean){
                await TodosService.updateFinishStatus(id,flag);
                let response=await TodosService.getAllTodos();
                this.getAllTodos(response.data.data);
            }
        }
    });
</script>


<style scoped>
    .btn{
        display: inline-block;  /* 如果是button默认就是这样 */
        padding: 8px 10px; margin-bottom: 0; font-size: 14px;
        line-height: 20px; text-align: center;vertical-align: middle;
        cursor: pointer;border-radius: 4px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    .btn-warning{
        color: #fff; background-color: orange;border: none;
    }
    .btn-warning:hover{
        color: #fff;background-color: red;
    }
    .btn:focus{
        outline: none;
    }
    /*item*/
    li {
        list-style: none;
        height: 36px;
        line-height: 36px;
        padding: 0 5px;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    li label {
        cursor: pointer;
    }


    li button.btn {
    /*display: none;*/
        display: inline-block; margin-top: 3px; padding: 3px 10px;
    }

    li:before {
    content: initial;
    }

    li:last-child {
    border-bottom: none;
    }
</style>